<template>
	<view class="contentbox">
		<view class="background"></view>
		<navView navTitle="合同付款" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
		<!-- 添加付款方式切换 -->
		<view class="pay-method-tabs">
			<view :class="['tab-item', payMethod === 'public' ? 'active' : '']" @click="payMethod = 'public'">
				对公打款
			</view>
			<view :class="['tab-item', payMethod === 'wechat' ? 'active' : '']" @click="payMethod = 'wechat'">
				微信支付
			</view>
		</view>
		<view v-if="payMethod === 'wechat'">
			<view class="list">
				<view class="title"></view>
				<view class="item">
					<view class="span">
						付款状态：{{ detail.pay_status === 0 ? '未付款' : '已付款' }}
					</view>
					<view class="ic">
						<view class="li">
							合同名称：{{ detail.name || '暂无' }}
						</view>
						<view class="li">
							合同编号：{{ detail.num || '暂无' }}
						</view>
						<view class="li">
							合同内容：{{ detail.content || '暂无' }}
						</view>
						<view class="li">
							付款金额：{{ detail.total_price || '暂无' }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="payMethod === 'public'">
			<!-- 添加对公打款信息展示模块 -->
			<view class="invoice-card">
				<view class="card-title">对公打款信息</view>
				<view class="info-list">
					<view v-for="(item, index) in config" :key="index" class="info-item">
						<view class="info-content">
							<text class="info-label">{{ item.title }}：</text>
							<text class="info-value">{{ item.value || '暂无' }}</text>
						</view>
						<view class="copy-btn" @click="copyText(item.value)">
							<uni-icons type="paperclip" size="18" color="#008EFE"></uni-icons>
							<text class="copy-text">复制</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="user_status != 2" class="button" @tap="urgePay()">
			<button>催付款</button>
		</view>
		<view v-if="user_status == 2 && payMethod =='wechat' " class="button"
			@tap="$navTo('/pages/knowledge/pay?id=' + detail.id + '&amount=' + detail.total_price)">
			<button>付款</button>
		</view>
		<view v-if="user_status == 2 && payMethod == 'public'" class="button"
			@click="confirmPublicPayment">
			<button>已完成对公付款</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: {},
			user_status: 2,
			config:{},
			payMethod: 'public', // 新增付款方式状态
			formData: {
				customer_id: '',
				contract_id: '',
				money: '',
				return_cate: '',
				return_type: '',
				remake: '用户申请合同对公信息缴费',
			}
		}
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
			this.getContractDateil()
		}
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.user_status = this.userInfo.role
		console.log(this.user_status, '用户信息')
	},
	methods: {
		// 新增打款完成确认方法
		confirmPublicPayment() {
			uni.showModal({
				title: '确认提示',
				content: '请确认已完成对公账户转账操作',
				success: (res) => {
					if (res.confirm) {
						if (this.detail.receivables_many && this.detail.receivables_many.length > 0) {
							uni.showToast({
								title: "您已提交打款信息，请勿重复提交",
								icon: 'none'
							})
							return false;
						}
						this.formData.number = this.createNumber();
						this.$request('/addons/qingdong/receivables/addReceivables', 'POST', this.formData).then(res => {
							console.log(res)
							if (res.code == 1) {
								uni.showToast({
									title: "提交成功，等待审核",
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1200)
							}
						})
						// 这里添加实际打款完成的后端逻辑
						uni.showToast({ title: '打款信息已提交审核', icon: 'success' });
					}
				}
			});
		},
		copyText(text) {
			if (!text) {
				uni.showToast({ title: '无内容可复制', icon: 'none' });
				return;
			}

			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({ title: '复制成功', icon: 'success' });
				}
			});
		},
		getContractDateil() {
			this.$request('/addons/qingdong/contract/getDetail', 'GET', {
				id: this.id
			}).then(res => {
				console.log(res, '获取合同详情')
				this.detail = res.data
				this.config = res.data.config				
				this.formData.customer_id = res.data.customer_id
				this.formData.contract_id = res.data.id
				this.formData.money = res.data.money
				this.formData.return_cate = "miniapp"
				this.formData.return_type = "微信支付"
			})
		},
		// 在提交方法中添加编号生成逻辑
		createNumber() {
			// 生成回款编号
			const date = new Date();
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const sequence = String(Math.floor(Math.random() * 90000) + 10000).padStart(5, '0');
			return `R${year}${month}${day}${sequence}`;

		},
		// 催付款
		urgePay() {
			this.$request('/addons/qingdong/message/sendPayContractNotice', 'GET', {
				relation_id: this.id
			}).then(res => {
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						mask: true,
						title: '催付款成功',
						duration: 6000,
					});
				} else {
					uni.showToast({
						icon: 'error',
						mask: true,
						title: '催付款发送失败',
						duration: 2000,
					});
				}
			})
		}
	}
}
</script>

<style lang="scss">
.contentbox {
	padding: 20rpx;
	box-sizing: border-box;
}

.background {
	background: #f5f6f9;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
.pay-method-tabs {
	display: flex;
	margin: 30rpx;
	background: #f5f6f9;
	border-radius: 16rpx;
	padding: 8rpx;

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
		color: #666;
		border-radius: 12rpx;
		transition: all 0.3s;

		&.active {
			background: #fff;
			color: #008EFE;
			box-shadow: 0 2rpx 6rpx rgba(0, 142, 255, 0.1);
		}
	}
}

.confirm-button {
	margin-top: 40rpx;

	button {
		background: #008EFE;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
	}
}

.invoice-card {
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 142, 255, 0.1);
	margin: 30rpx;
	padding: 30rpx;

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;

		.info-content {
			flex: 1;
			margin-right: 20rpx;

			.info-label {
				font-size: 28rpx;
				color: #666;
			}

			.info-value {
				font-size: 28rpx;
				color: #333;
				word-break: break-all;
			}
		}

		.copy-btn {
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid #008EFE;
			background: rgba(0, 142, 255, 0.05);

			.copy-text {
				color: #008EFE;
				font-size: 24rpx;
				margin-left: 8rpx;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}
}

.list {
	width: 100%;

	.title {
		width: 100%;
		height: 60rpx;
		background: #ABDAFE;
		border: 20rpx solid #008EFE;
		border-radius: 50rpx;
		box-sizing: border-box;
	}

	.item {
		position: relative;
		width: 90%;
		margin: 0 auto;
		margin-top: -30rpx;
		background: #fff;
		border-radius: 5rpx;
		box-sizing: border-box;

		.span {
			font-weight: bold;
			font-size: 28rpx;
			color: #008EFE;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eaeaea;
		}

		.ic {
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;

			.li {
				padding: 10rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
}

.button {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff;
	padding: 20rpx 30rpx;
	box-sizing: border-box;

	button {
		width: 100%;
		margin: 0;
		background: #008EFE;
		color: #fff;
		border: 0;
		border-radius: 50rpx;
	}
}
</style>